<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="a_vuejs/vue.global.js"></script>

</head>
<body>

<div id="app">
    <h3>具名插槽:具有名字的插槽 </h3>
    <h3>当有多个插槽空位子的时候:我们可以根据名字将不同的内容插入到指定的位置</h3>
    <coma>
        <template #one> <div style="width: 100px;height: 100px;background-color: crimson;float: left">这里是第一个模块</div> </template>
        <template #tow> <div style="width: 100px;height: 100px;background-color: yellow;float: left">这里是第二个模块</div> </template>
        <template #three> <div style="width: 100px;height: 100px;background-color: mediumblue;float: left">这里是第三个模块</div> </template>
    </coma>
    <br/>
    <coma>
        <template #one> <div style="width: 100px;height: 100px;background-color: crimson;float: left">这里是第一个模块</div> </template>
        <template #tow> <div style="width: 100px;height: 100px;background-color: yellow;float: left">这里是第二个模块</div> </template>
        <template #three> <div style="width: 100px;height: 100px;background-color: mediumblue;float: left">这里是第三个模块</div> </template>
    </coma>
</div>

</body>

<script>

    Vue.createApp({
        components:{
            'coma':{
                template:'<div style="width: 600px;height: 200px;background-color: greenyellow"> 这里是子组件 <slot name="one"></slot> <slot name="tow"></slot> <slot name="three"></slot> </div>'
            }
        }
    }).mount("#app")
</script>

</html>